<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约挂号</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style1.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .btn{
            color:#409eff;!important;
            background-color: #ecf5ff;
            border: 1px solid #b3d8ff;
        }
        .btn-text{
            color:#409eff;!important;
        }
        .btn:hover,.btn-text:hover,.btn-text:focus,
        .btn:focus{
            color: #fff !important;
            background-color: #409eff !important;
            border-color: #409eff !important;
        }
        /*.btn-text:hover,.btn-text:focus{*/
        /*    color: #fff !important;*/
        /*}*/
    </style>
</head>
<body>
<script type="text/javascript" th:inline="javascript">
    function redirectToAppointment(day) {
        // 根据选择的星期跳转
        window.location.href = `/user/toAppointment?currentPage=1&mykey=${day}`;
    }

    function appointment(dId, time) {
        $.ajax({
            //请求路径，要注意的是url和th:inline="javascript"
            url: [[@{/user/appointmentDoctor}]],
        //请求类型
        type: "post",
            //data表示发送的数据
            data: {
            dId: dId,
                time: time
        },
        //成功响应的结果
        success: function (obj) {
            //obj响应数据
            alert(obj)
            //并刷新网页
            location.reload();
        },
        error: function () {
            alert("处理异常！");
        }
    });
    }
</script>
<div th:include="user/header"></div>

<main id="main">

    <!--副标题-->
    <section class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h2 id="pageTitle">挂号</h2>
                <ol>
                    <li><a href="index.html">首页</a></li>
                    <li id="breadcrumbItem"><a href="#" ></a>挂号</li>
                </ol>
            </div>
        </div>
    </section>
</main>
<section class="inner-page">
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">挂号</h3>
            </div>
            <div class="card-body">
                <div style="display: flex;">
                    <div>
                        <label for="detail">选择挂号星期：</label>
                        <select id="detail" name="detail" onchange="redirectToAppointment(this.value)">
                            <option value="0">请选择</option>
                            <option value="1">星期一</option>
                            <option value="2">星期二</option>
                            <option value="3">星期三</option>
                            <option value="4">星期四</option>
                            <option value="5">星期五</option>
                            <option value="6">星期六</option>
                            <option value="7">星期日</option>
                        </select>
                    </div>
                    <div>
                        <form action="user/search" class="navbar-form navbar-right" style="display: flex;margin-left: 10px">
                            <div class="form-group" >
                                <input type="text" class="form-control" name="key" placeholder="请输入关键词" style="height: 40px; margin-top:-1px ;" />
                            </div>
                            <button type="submit" class="btnn" style="margin-top: -1px; height: 40px; margin-left: 10px;" >搜索</button>
                        </form>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table text-center">

                        <tbody class="text-center">
                        <table class="table table-bordered table-hover">
                            <tbody class="text-center" style="align-content: center">
                            <tr th:each="doctor:${doctorList}" >
                                <td class="card" style="background-color: rgb(236, 248, 253);  width: 300px;height: 400px">
                                    <div style="text-align: center;">
                                        <img th:src="${doctor.tx}" alt="头像" style="width: 100px; height: 100px; border-radius: 50%;">
                                    </div>
                                    <div style="text-align: center; margin-top: 10px; font-weight: 550;">
                                        <span th:text="${doctor.name}"></span>
                                    </div>
                                    <div style="padding: 0px 10px; margin-top: 20px; color: rgb(53, 53, 35); min-height: 80px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;">
                                        <span th:text="${doctor.note}"></span>
                                    </div>
                                    <div style="margin-top: 10px; text-align: center;">
                                                            挂号费：<span th:text="${doctor.fee}" style="color: red; margin-right: 20px; font-weight: 550;"></span>
                                                            <span style="margin-right: 10px;">剩余次数：</span>
                                                            <span class="remaining-count" th:text="${doctor.num}"></span>
                                                        </div>
                                                        <div class="form-group" >
                                                            <label for="timeSlot" style="margin-left: -120px; margin-top: 10px">选择时间:</label>
                                                            <select class="form-control" id="timeSlot" name="timeSlot" style="margin-left: 40px;margin-top: -25px;height: 35px">
                                                                <option value="上午">上午</option>
                                                                <option value="下午">下午</option>
                                                            </select>
                                                        </div>
                                    <div style="margin-top: 15px; text-align: center;">
                                        <a href="javascript:void(0)" th:onclick="'appointment(' + ${doctor.id} + ', document.getElementById(\'timeSlot\').value)'"><button  type="button" class="btn btn-sm " style="width: 100px;border: 1px solid #b3d8ff;"><span class="btn-text">挂&nbsp;&nbsp;号</span>
                                        </button></a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div th:if="${currentPage != null}" style="display: flex; justify-content: center; bottom: 0; width: 100%;">
            <table>
                <tr>
                    <td colspan="4" align="right">
                        <ul class="pagination">
                            <li><a>第<span th:text="${currentPage}" ></span>页</a></li>
                            <li><a>共<span th:text="${totalPage}" ></span>页</a></li>
                            <li>
                        <span th:if="${currentPage} != 1" >
                                 <a th:href="@{user/selectMyMzghByPage(currentPage=${currentPage - 1}, mykey=${mykey})}">上一页</a>

                        </span>
                                <span th:if="${currentPage} != ${totalPage}" >
                                    <a th:href="@{user/selectMyMzghByPage(currentPage=${currentPage + 1}, mykey=${mykey})}">上一页</a>
                        </span>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</section>

</body>
</html>